<template>
	<div>
		<float-ball
			ref="floatBall"
			bounce
			:width="width"
			:height="height"
			:offset-x="xAxis"
			:offset-y="yAxis"
			@click="jumpWechatContact"
		>
			<div class="wechat-contact">
				<img class="wechat-contact_img" :src="options.img ? `${options.img}` : `${ossImgUrl}contact.png`" alt />
			</div>
		</float-ball>
		<van-dialog
		class="dialog"
		v-model="show"
		get-container="#app"
		@opened=""
		:show-confirm-button="false"
		>
		<div class="copy-content" :class="{ margin: $slots.default }">
			<template>
			<van-button
			style="font-size: 19px;"
				type="primary"
				block
				icon="wechat"
				class="open-wx"
				@click=""
			>
				打开微信添加客服
			</van-button>
			</template>
		</div>
		<div class="dialog-actions van-hairline--top no-select">
			<van-button class="cancel" size="large" @click="close"> 关闭 </van-button>
			<van-button
			class="confirm van-hairline--left"
			size="large"
			@click="onConfirm"
			>
			前往
			</van-button>
		</div>
		</van-dialog>
	</div>
</template>

<script>
import { ossImgUrl } from '@/config'
import floatBall from '@/components/float-ball'
const { clientWidth } = document.documentElement

export default {
	components: {
		floatBall,
	},
	props: {
		view: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {
			ossImgUrl,
			ballX: clientWidth - 60,
      		show: false
		}
	},
	computed: {
		config() {
			return this.$store.getters['open/config']
		},
		isMiniprogram() {
			const uniEnv = this.$uni.env
			return uniEnv.miniprogram
		},
		options() {
			return this.view.options
		},
		xAxis() {
			return 	this.options.x ? parseInt(this.options.x) : 10
		},
		yAxis() {
			return 	this.options.y ? parseInt(this.options.y) : 200
		},
		width() {
			return 	this.options.width ? parseInt(this.options.width) : 50
		},
		height() {
			return 	this.options.height ? parseInt(this.options.height) : 50
		}
	},
	methods: {
		jumpWechatContact() {
			if (this.options.contactType == 1) {
				if (this.isMiniprogram) {
					if (!this.options.corpId) {
						this.$toast('缺少企业信息！')
						return false
					}

					const enterpriseWechatContactUrl = encodeURIComponent(encodeURIComponent(this.options.link))
					// ww7cb938a7111ac45f
					wx.miniProgram.navigateTo({ url: `/pages/contact/index?corpId=${this.options.corpId}&enterpriseWechatContactUrl=${enterpriseWechatContactUrl}` })
				} else {
					window.location.href = this.options.link
				}
				return false
			} 
			if (this.options.contactType == 2) {
				wx?.miniProgram?.navigateTo({ url: `/pages/contact/index` })
				return false
			}
			if (this.options.contactType == 3) {
				if (this.options.is_dialog == 1) {
					this.show = true;
				}
				else {
					const { biz_id } = this.config
					const { mp_query,  skip_mp_id } = this.options
	
					this.skipAdMp({ biz_id, mp_query, skip_mp_id })
					return false
				}
			}
		},
		close() {
		this.show = false;
		},
		onConfirm() {
			const { biz_id } = this.config
			const { mp_query,  skip_mp_id } = this.options

			this.skipAdMp({ biz_id, mp_query, skip_mp_id })
			return false
		}
	},
}
</script>

<style lang="scss" scoped>
.wechat-contact {
	// background-color: #fff;
	width: 100%;
	height: 100%;
	// border-radius: 50%;
	overflow: hidden;
	img {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.dialog-actions {
    display: flex;
    overflow: hidden;
    .confirm,
    .cancel {
      flex: 1;
      margin: 0;
      border: 0;
      font-size: 0.41111rem;
    }
    .cancel,
    .cancel:active {
      color: #909399;
    }
    .confirm,
    .confirm:active {
      color: #ee0a24;
    }
  }
</style>